<link href="css/default.css" style="text/css" rel="stylesheet">
<link href="css/library-icons.css" style="text/css" rel="stylesheet">
<link href="css/themes.css" style="text/css" rel="stylesheet">
<style>
	.roundabout-holder {padding:0px; height:187px; overflow:hidden;opacity:1}
	.roundabout-moveable-item { 
		height: 100%; 
		width: 70%;
		margin:2px 2px;
		cursor: pointer;
	      	background-color:white;
   	}
   	.roundabout-in-focus { cursor: auto; }
   	.roundabout-ul {
		list-style: none;
		padding:0px;
		height:87%;

	}


.inactive-tab{
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
    width:55px;
    border:1px solid gray;
    border-bottom:0px ;
    background-color:#f3f3f3;
   }
   .active-tab{
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
    width:55px;
    border:1px solid gray;
    border-bottom:0px ;
    background-color:#d3d3d3;
    font-weight:bold;
   }
   .view-through{
    opacity:0.8;
   }
</style>

<!-- 
    *
    * Third party javascript libraries:
    *	JQuery 1.4.4	http://jquery.org
    *	JIT	2.0 	created by Nicolas Garcia Belmonte of http://jit.org
    *	adobe air	provided by adobe air (aliasing to actionscript) 
    *
-->
<script src="js/air/air-aliases.js"></script>
<script src="js/jquery/jquery-1.4.4.js"></script>
<!-- 
	*
	* jxf framework and utilities
	*	rpc		performs rpc handling (ajax)
	*	dom		manipulation of dom objects (common tasks)
	*	sqlite		adobe air wrapper for handling sqlite dbase
	*	jxbinder	runtime loading of html documents this is a work around the annoying adobe air sandbox
	*
-->

<script src="js/jxf/jxbinder.js"></script>
<script src="js/jxf/google/jxf-google.js"></script>
<script src="js/jxf/dom.js"></script>
<script src="js/jxf/rpc.js"></script>
<script src="js/jxf/sqlite.js"></script>
<script src="js/jxf/widgets/jxwidgets.js"></script>
<script src="js/jxf/lastfm/parser.js"></script>
<script src="js/jxf/facebook/jxf-facebook.js"></script>

<script src="js/jxf/crypt/sha1.js"></script>
<script src="js/jxf/crypt/oauth.js"></script>
<!-- 
	*
	* This section are the scripts for storage providers
	* The order of the libraries seem to be important i.e
	*
-->
<script src="js/providers/google/gdocs-handler.js"></script>
<script src="js/providers/dropbox/dropbox.js"></script>
<script src="js/providers/playlist/playlist.js"></script>
<script src="js/library.js"></script>
<script src="js/providers/local/lstore.js"></script>

<!-- 
	*
	* system utilities and misceallaneous files that are specific to either 3-launchpad on air or to 3-launchpad processing
	*
-->
<script src="js/utils.js"></script>
<script src="js/player.js"></script>

<script src="/html/sys/setup/js/elp-system.js"></script>
<script src="/html/sys/setup/js/elp-media-player.js"></script>
<script src="/html/sys/setup/js/elp-plhandler.js"></script>
<script src="js/theme.js"></script>
<script src="js/updater.js"></script>

<script>
//-- pointer that will initialize the program 
var initpage = 'welcome' ;
//-- facebook initialization
  /*fb.app.id = '204560106224091' ;
  fb.app.url = 'http://apps.facebook.com/e-launchpad' ;
  fb.app.secret = '6cc5d3cde5f5ce806a697b6d1cb45581'
  fb.app.iframe = 'fb.panel';
  */
  //fb.app.init() ;
  function Initialize(){
	updater.init() ;
	utils.modules.setup() ;
	jx.dom.show('mainmenu') ;
	theme.init() ;
	theme.set();
	lstore.load();
	dstore.load();       
	utils.modules.show(initpage);
        library.render('menulib','all') ;

       //
       // This section will handle any potential arguments passed to 3-launchpad
       // Arguments are passed to 3-launchpad when a click/double click to open a file is triggered
       //
  	     
       air.NativeApplication.nativeApplication.addEventListener(air.InvokeEvent.INVOKE, lstore.events.OpenFile)
       var callback=function(handler){
		player.associate.isdefault = handler.data[0].value ;
		air.trace(player.associate.isdefault);
		player.associate.set(null);
       }
       sqlite.run.query("3launchpad.db3","select * from params where alias='open.mp3'",callback) ;
  }  
      
 
   var file = air.File.applicationStorageDirectory.resolvePath("3launchpad.db3") ;
    if(file.exists == false){
      
      sqlite.run.create("3launchpad.db3") ;
      var create = "create table params(agn integer not null primary key, alias varchar not null unique, value varchar not null)" ;
      var insert = "insert into params (alias,value) values('theme','clone')" ;
      sqlite.run.cmd(file.nativePath,create) ;
      sqlite.run.cmd(file.nativePath,insert) ;
      sqlite.run.cmd(file.nativePath,"insert into params(alias,value) values('local.library','{}')") ;
      sqlite.run.cmd(file.nativePath,"insert into params(alias,value) values('dropbox.library','{}')");
      sqlite.run.cmd(file.nativePath,"insert into params(alias,value) values('open.mp3','true')");
      //sqlite.run.cmd(file.nativePath,"insert into params(alias,value) values('isallowed.faceboo.mp3','true')");
	
    }else{
      initpage = 'mlibrary'
    }
    //
// The code below needs to run before the pages are loaded. 
// This allows the various dependencies to be ready for use and to circumvent the adobe air security restrictions
// 
  
	utils.modules.init('welcome','index.html','stdout') ;
 	utils.modules.init('google','providers/google/index.html','stdout') ;
 	utils.modules.init('local','providers/local/index.html','stdout') ;
 	utils.modules.init('theme','theme.html','stdout') ; 
 	utils.modules.init('mlibrary','library.html','stdout') ;
 	utils.modules.init('help','help.html','stdout')     ;
 	utils.modules.init('player','player.html','stdout');
 	utils.modules.init('config','config.html','stdout') ;
	utils.modules.init('mainmenu','controls.html','controls') ;

      lstore.init.lookup() ;
      dstore.init.lookup();
    
//
// The code below is invoked by the library tabs and handles various interactions where the library
// i.e the list of songs will appear.
// TODO: The section below needs to be put into the appropriate file 
//
var menulib={
  open:function(id){
    var tabs =['all','google','local','dropbox'] ;
    for(var i=0; i < tabs.length; i++){
      jx.dom.set.css(tabs[i]+'-tab','inactive-tab') ;
    }
    jx.dom.set.css(id+'-tab','active-tab') ;
    library.render('menulib',id)
  }//-- menulib.open(id)

}

</script>

<body id="body" class="default" onload="Initialize()" style="">
<div  style="width:95%; border:5px double gray; padding:2px; margin-top:5px">
  <div style="background-color:#d3d3d3;border-bottom:1px solid gray; cursor:move;" onmousedown="nativeWindow.startMove()">
    <span onclick="player.controls.stop(); window.location.reload()" style="cursor:pointer;">&nbsp;
    <b><i>3-launchpad</i></b></span><span> - Desktop Edition </span>
   
  </div>
<div id="app" style="height:90%; padding:3px">
  <div>&rsaquo;&rsaquo; <span id="version" class="small" style="margin-left:5px"></span></div>
  <div>&rsaquo;&rsaquo; <span id="alert" class="small" style="margin-left:5px; color:maroon"></span></div>

<div>  
  <table width="90%" align="center" style="margin-top:2px; ">
  <tr class="medium shaded-light view-through">
    <td colspan="2" style="-webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; border:2px solid gray">
	<div id="id3" class="view-through">    
	  <div class="medium" style="font-weight:bold">
		<span id="artist" style="margin-left:5px; font-size:14px">Unknown<span>
	  </div>
	  <div class="medium" style="">
		<span id="song" style="margin-left:5px">Uknown<span>
	  </div>
	  <div class="medium" style="">
		<span id="progress" style="margin-left:5px">0.00 %</span>
	  </div>    
    </td>
  </tr>
    <tr class="medium">
      <td valign="top" width="150px" style="background-color:#d3d3d3;border:2px solid gray;">
	<div  align="center" class="" style="height:128px; width:128px; margin-left:11.5px;margin-top:12px;">
	    <img id="artist.pic" src="img/default/unknown-artist.jpg" style="margin-top:2px;"/>
	</div>
	<!-- volume controls -->
	<table id="volume-control" class="shaded-light" width="100%" cellspacing="0px" style="width:150px; margin-top:15%; border:0px solid gray">
		<tr class="medium">
			<td  rowspan="2" class="" valign="bottom" >
			<div>
			    Volume level  <span id="volume.level">10</span> %
			</div>
			<div style="font-weight:bold;">
			    <span class="action" type="image" id="mode.none" src="img/repeat_none.png" onclick="player.controls.setmode('song'); jx.dom.hide('mode.none'); jx.dom.show('mode.song')"> &rsaquo;&rsaquo; Repeat </span>
			    <span class="action" id="mode.song" src="img/repeat_song.png" onclick="player.controls.setmode('all') ;jx.dom.hide('mode.song'); jx.dom.show('mode.all')" style="display:none"> &rsaquo;&rsaquo; Repeat </span>
			    <span class="action" id="mode.all" src="img/repeat_all.png" onclick="player.controls.setmode('none');  jx.dom.hide('mode.all'); jx.dom.show('mode.none')" style="display:none"> &rsaquo;&rsaquo; Repeat </span>
			    <span id="mode">none</span>
			</div>
			</td>
		<td align="right">
		    <input type="image" src="img/default/volume_up.png" onclick="player.controls.volume.up()"/>
		</td>
		</tr>
		<tr class="medium">
		  <td align="right" rowspan="2">
	  	    <input type="image" src="img/default/volume_down.png" onclick="player.controls.volume.down()"/>
		  </td>
		</tr>
	    </table>
    
	<div id="" align="center" class="shaded-light" style="border-top:0px solid gray;width:148px;padding:2.7px; margin-top:1%">
	    <input type="image" src="img/rwd_1.png" onclick="player.controls.back()"/>
	    <input type="image" src="img/stop_1.png" onclick="player.controls.stop()"/>
	    <input type="image" id="pause.button" src="img/pause_1.png" style="display:none" onclick="player.controls.pause()"/>
	    <input type="image" id="play.button" src="img/play_1.png" onclick="player.controls.play()"/>
	    <input type="image" src="img/fwd_1.png" onclick="player.controls.next()"/>
	</div> 
      </td>
      <td valign="top" class="view-through" style="background-color:#f3f3f3;border:2px solid gray">
	  <div id="stdout" style="padding:2px; margin:2px; overflow:hidden; height:220px; border:1px solid white"></div>

      </td>
    </tr>
    <tr class="medium">
    	<td valign="middle" class="small shaded" style="border:2px solid gray; -webkit-border-bottom-left-radius:10px;" class="shaded-light">
		<div align="center"> Licensed under GPL V3</div>
		<div align="center">&copy; 2010 - 2011 3-launchpad</div>
	</td>
	<td valign="top" class="shaded" style="border:2px solid gray; -webkit-border-bottom-right-radius:10px;" >
		<div id="controls" style="-webkit-border-bottom-right-radius:10px;"></div>
	</td>
    </tr>
  </table>
</div>

</body>
